<template>
<el-dialog
    :title="!dataForm.flid ? '新增' : '修改'"
    :close-on-click-modal="false"
    width= "30%"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item label="商品">
            <!-- <el-input  v-if="dataForm.flid" v-model="dataForm.prodName" placeholder="" :disabled="true" style="color:black"></el-input> -->
            <!-- <el-select v-if="!dataForm.flid" v-model="dataForm.prodId" placeholder="请选择">
                <el-option
                v-for="item in prodList"
                :key="item.index"
                :label="item.prodName"
                :value="item.prodId"
                :disabled="item.disabled">
                </el-option>
            </el-select>             -->
            <!-- {{dataForm.prodId}} -->
            <div v-if="dataForm.flid" class="prodBox">
                <span style="width:200px;margin:10px 0 0 10px">{{dataForm.prodName}}</span>
                <img :src="dataForm.pic" alt="" style="width:140px;border-radius:5px">
            </div>
            
            <div v-if="!dataForm.flid">
                <div v-if = '!prod' class="chosenBox" @click="enterChoseProd">
                    <div class="center">
                        <div class="border b1"></div>
                        <div class="border b2"></div>
                        <div class="border b3"></div>
                        <div class="border b4"></div>
                    </div>
                </div>
                <div v-if="prod" class="prodBox" @click="enterChoseProd">
                    <span style="width:200px;margin:10px 0 0 10px">{{prod.prodName}}</span>
                    <img :src="prod.pic" alt="" style="width:140px;border-radius:5px">
                </div>
            </div>
        </el-form-item>
        <el-form-item label="返利类型">
            <template>
            <!-- <el-radio v-model="dataForm.type" label= "0">固定金额返利</el-radio> -->
            <el-radio v-model="dataForm.type" label= "0">按比例返利</el-radio>
            </template>           
            <!-- {{dataForm.type}} -->
        </el-form-item>
        <el-form-item  v-if="dataForm.type == 0" label="输入比例" prop='amount'>                
            <el-input v-model="dataForm.amount" style="width:65%;"><template slot="append">%</template></el-input>
        </el-form-item>
        <!-- <el-form-item v-if="dataForm.type == 1" label="输入比例" prop="percent">
            <el-input v-model="dataForm.percent" placeholder="请输入比例">
            </el-input>
            {{dataForm.percent}}
        </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <!-- <el-button @click="testFun">获取dataform</el-button> -->
    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <!-- 选择商品 -->
    <el-dialog
        title=""
        :visible.sync="choseProdVisible"
        :close-on-click-modal="false"
        top="8vh"
        center
        width="70%"
        append-to-body>
        <div style="height:70vh;overflow:auto">
        <avue-crud ref="crud"
                :data="prodList"
                :option="tableOption">
            <template slot-scope="scop" slot="menu">
                <el-button size="medium"   type="normal" @click.stop="choseProd(scop.row)">确定</el-button>
            </template>                
        </avue-crud>            
        </div>
        <div style="height:20px" slot="footer">
        </div>
    </el-dialog>



</el-dialog>
</template>

<script>
import { tableOption } from '@/crud/finance/prodList'
import { isEmail, isMobile } from '@/utils/validate'
export default {
    data() {
        let validPercent = (rule,value,callback) =>{
            console.log(value)
            if (value>=100||value<=0) {
                callback(new Error("当前选择为百分比返利，请输入100以内数字"))
            } else {
                callback()
            }
        }
        return {
            visible: false,
            choseProdVisible: false,
            tableOption: tableOption,
            dataForm:{
                prodId:null,
                amount:null,
                type: "0",
                percent: null
            },
            prod:null,
            prodList: [],
            dataRule:{
                amount:[
                    {required: true, message:'请输入比例', trigger: 'change'},
                    {validator: validPercent, trigger:'change'}
                ],
                // percent:[
                //     {required: true, message:'请输入比例', trigger: 'blur'},
                // ]
            }
        }
        
    },
    props:{
    },

    methods: {
        init (row) {
            console.log(row);
            // 重置表格
            this.visible = true  
            this.dataForm = {
                prodId:null,
                amount:null,
                type: "0",
            },
            this.prod = null

            this.dataForm.flid = row.flid
            if (row.prodId) {
                this.dataForm.prodId = row.prodId
                this.dataForm.pic = row.pic
                this.dataForm.prodName = row.prodName
                // this.dataForm.type = String(row.type)
                this.dataForm.amount = row.amount*100
                this.dataForm.flid = row.flid
								this.dataForm.status = row.status
            }
            this.$http({
                url: this.$http.adornUrl("/prod/prod/spread"),
                method:'get'
            }).then(({data}) =>{
                this.prodList = data            
            })                
        },

        // 表单提交
        dataFormSubmit () {
            this.$refs['dataForm'].validate((valid) => {
            if (valid) {
                // console.log(this.amount,this.percent);
                let url = this.dataForm.flid?'/admin/rebate/updateRebate':'/admin/rebate/insertRebate'
                this.$http({
                    url: this.$http.adornUrl(url),
                    method: 'put',
                    params: this.$http.adornParams(
                        Object.assign({
                            prodId: this.dataForm.prodId,
                            pic: this.dataForm.pic,
                            prodName: this.dataForm.flid?this.dataForm.prodName:this.prod.prodName,
                            type: 1,
                            amount: this.dataForm.amount/100,
                            flid: this.dataForm.flid,
														status: this.dataForm.status
                        },)
                    )              
                }).then(({data}) => {
                        this.$message({
                            message:'操作成功',
                            type:'success'
                    })
                    this.$emit("refreshDataList")
                })
            }
            this.visible = false
            })
        },

        enterChoseProd(){
            this.choseProdVisible = true
            
        },

        choseProd(row){
            // console.log(row);
            this.prod = row
            this.dataForm.prodId = row.prodId
            this.dataForm.pic = row.pic
            this.choseProdVisible = false
        }
    },
}
</script>
<style lang="scss" scoped>
    .chosenBox{
        height: 148px;
        width: 148px;
        border: 1px dashed #C0CCDA;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #8C939D; 
        font-size: 48px;
        font-weight: 100;
        cursor: pointer;
    }
    .center{
        height: 26px;
        width: 26px;
        display: flex;
        flex-wrap: wrap;
    }
    .border{
        height: 13px;
        width: 13px;
        border: 1px solid white;
    }
    .b1,.b2{
        border-bottom: 1px solid #c0c0c0;
    }
    .b3,.b4{
        border-top: 1px solid #c0c0c0;
    }
    .b1,.b3{
        border-right: 1px solid #c0c0c0;
    }
    .b2,.b4{
        border-left: 1px solid #c0c0c0;
    }

    .prodBox{
        height: 140px;
        border: 1px solid #c0c0c0;
        width: 340px;
        border-radius: 5px;
        display: flex;
    }
</style>